<template>
  <div>
    <van-nav-bar
      title="意见反馈"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="fd-box">
      <div class="lx">
        <p class="lx-p">问题反馈类型</p>
        <p class="lx-btn">
          <button class="btn-1">功能异常</button>
          <button>优化建议</button>
          <button>其他反馈</button>
        </p>
        <textarea class="text" name="" id="" cols="30" rows="10" placeholder="请输入您想反馈的内容..."></textarea>
        <p class="pp">添加图片<span class="ss">（选填、最多4张）</span></p>
        <van-uploader v-model="fileList" multiple class="up" />

      </div>
    </div>
    <button class="fd-btn">提交</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const onClickLeft = () => history.back();
const fileList = ref([
      // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
      // Uploader 根据文件后缀来判断是否为图片文件
      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      // { url: 'https://cloud-image', isImage: true },
]);
</script>
<style scoped>
.fd-box{
  width: 100%;
  height: 1050px;
  background-color: #F6F6F6;
  position: relative;
}
.lx{
  width: 90%;
  height: 70%;
  position: absolute;
  background-color: #fff;
  margin-left: 5%;
  top: 30px;
}
.lx-p{
  font-size: 28px;
  font-weight: 600;
  margin: 20px;
  color: #494949;
}
.lx-btn>button{
  width: 30%;
  height: 70px;
  border-radius: 10px;
  border: none;
  margin-left: 2.5%;
  font-weight: 600;
  font-size: 26px;
}
.btn-1{
  background-color: #1E6FFF;
  color: #fff;
}

.text{
  width: 94%;
  height: 290px;
  border: none;
  font-size: 30px;
  padding-left: 20px;
  margin-top: 50px;
}
.fd-btn{
  width: 90%;
  height: 100px;
  margin-left: 5%;
  margin-top: 30px;
  border: none;
  border-radius: 20px;
  background-color: #1E6FFF;
  color: #fff;
  font-size: 30px;
}
.up{
  margin-left: 20px;
}
.pp{
  font-size: 25px;
  font-weight: 600;
  margin-left: 20px;
  margin-bottom: 30px;
  color: #494949;
}
.ss{
  font-weight: 400;
  color: #ADADAD;
}
</style>
